import clubAvatar from "@/views/society/club/components/clubAvatar";
import paymentMethod from "../../components/paymentMethod";
import partyStatus from "../../components/partyStatus";
import partyTag from "../../components/partyTag";
import { rowKeys } from "@/views/society/party/store";
import { drawerConfig } from "@/views/society/party/partyList/drawer";
import { getLocaleDateTime } from "../../utils";
export default defineComponent({
  components: {
    clubAvatar,
    paymentMethod,
    partyStatus,
    partyTag,
  },
  props: {
    formState: {
      type: Object,
      default: () => ({
        ...rowKeys,
        isShowGoReviewBtn: false, // 是否显示去审核按钮
        isShowReviewBtnGroup: false, // 是否显示审核按钮组
      }),
    },
    statusLoading: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["handleAction", "refreshTable"],
  setup(props, { attrs, emit, expose, slots }) {
    const { proxy } = reactive<any>(getCurrentInstance());
    const defineDrawer = drawerConfig({
      handleAction: (...args: any) => {
        emit("handleAction", ...args);
      },
      refreshTable: (...args: any) => {
        defineDrawer.visible.value = false;
        emit("refreshTable", ...args);
      },
      fetchList: (...args: any) => {
        defineDrawer.visible.value = false;
        emit("refreshTable", ...args);
      },
    });
    const showDrawer = () => (defineDrawer.visible.value = true);
    const { title: drawerTitle, formState: drawerForm } = defineDrawer;
    const handleClick = ({ record, type }: any) => {
      switch (trimAll(type)) {
        case "review":
          drawerTitle.value = $t("base.partyDetail");
          showDrawer();
          Object.keys(drawerForm).forEach((key: any) => {
            drawerForm[key] = props.formState[key] ?? drawerForm[key];
          });
          drawerForm.tabType = 1;
          drawerForm.isShowGoReviewBtn = false;
          drawerForm.isShowReviewBtnGroup = true;
          break;
        case "cancel":
          proxy.$confirm({
            closable: true,
            maskClosable: true,
            icon: null,
            title: () => <>{$t("base.acncelParty")}</>,
            style: {
              top: "30%",
            },
            content: <>{$t("party12")}</>,
            onOk: async () => {
              try {
                const res: any = await societyApi.party.cancelParty({
                  party_id: record.id,
                });
                if (res.code != 200) return message.error(res.message);
                message.success($t("base.cancelSuccess"));
                emit("handleAction", {
                  record,
                  type: "cancel",
                });
              } catch (error: any) {
                message.error(error.message);
              } finally {
              }
            },
          });
          break;
      }
    };
    const isShowTagSelect = ref(false);
    const toggleTagSelect = () =>
      (isShowTagSelect.value = !isShowTagSelect.value);
    return () => (
      <>
        <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
          <s-title style="margin: 0">{$t("base.partyInfo")}</s-title>
          {props.formState.status === 1 ? (
            <s-button
              size="small"
              onClick={() =>
                handleClick({ record: props.formState, type: "cancel" })
              }
            >
              {$t("base.acncelParty")}
            </s-button>
          ) : null}
        </div>

        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={24}>
            {$t("party15")}：
            <img src={props.formState.background_img} style="width: 200px" />
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            {$t("party16")}：{props.formState.buss_id}
          </a-col>
          <a-col span={8}>
            {$t("party17")}：{props.formState.name}
          </a-col>
          <a-col span={8}>
            <div style="display: flex;align-items: center;">
              {$t("party30")}:
              <clubAvatar
                data={props.formState.initiator}
                style="margin: 0 10px"
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            <a-spin spinning={props.statusLoading}>
              <div style="display: flex;align-items: center;">
                {$t("party31")}:
                <partyStatus
                  status={props.formState.status}
                  style="margin: 0 10px"
                />
                {props.formState.status === 0 &&
                props.formState.isShowGoReviewBtn ? (
                  <s-button
                    size="small"
                    onClick={() =>
                      handleClick({ record: props.formState, type: "review" })
                    }
                  >
                    {$t("party29")}
                  </s-button>
                ) : null}
              </div>
            </a-spin>
          </a-col>
          <a-col span={8}>
            {$t("party18")}：
            <span style="color: #0052D9">
              {props.formState.confirmed_num}/{props.formState.member_num}
            </span>
          </a-col>
          <a-col span={8}>
            <div style="display: flex;align-items: center;">
              {$t("party32")}:
              <paymentMethod
                payment_method={props.formState.payment_method}
                style="margin-left: 10px;"
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            {$t("party19")}：{getTimeByZone(props.formState.start_time)} -
            {getTimeByZone(props.formState.end_time)}
          </a-col>
          <a-col span={8}>
            {$t("party20")}：{getTimeByZone(props.formState.create_time)}
          </a-col>
          <a-col span={8}>
            {$t("party21")}：{getTimeByZone(props.formState.update_time)}
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={8}>
            {$t("party22")}：{props.formState.city}/{props.formState.address}
          </a-col>
          <a-col span={8}>
            {$t("party23")}：
            {props.formState.is_club_belong ? $t("party34") : $t("party35")}
          </a-col>
          <a-col span={8}>
            <div style="display: flex;align-items: center;">
              {$t("party33")}:
              <partyStatus
                status={props.formState.status}
                style="margin-left: 10px"
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="s-drawer-extra-row s-drawer-extra-row-margin">
          <a-col span={24}>
            {$t("party24")}：{props.formState.introduction}
          </a-col>
        </a-row>
        <div style="margin: 10px 0 10px 20px; fontWeight: bold">
          {$t("party36")}
        </div>
        <a-row
          class="s-drawer-extra-row s-drawer-extra-row-margin"
          style="margin: 10px 0 10px 40px"
        >
          <a-col span={8}>
            {$t("party25")}：
            {props.formState.is_provide_ticket === 1
              ? $t("party37")
              : $t("party38")}
          </a-col>
          <a-col span={8}>
            {$t("party26")}：
            {props.formState.is_post_anony === 1
              ? $t("party37")
              : $t("party38")}
          </a-col>
          <a-col span={8}>
            {$t("party27")}：
            {props.formState.need_cert_level > 0 &&
            props.formState.need_vip_level > 0
              ? $t("party37")
              : $t("party38")}
          </a-col>
        </a-row>
        <div style="display: flex;width: 100%;justify-content: space-between;margin-bottom: 10px;">
          <s-title style="margin: 0">{$t("party14")}</s-title>
          {props.formState.isShowReviewBtnGroup ? (
            <a-button
              onClick={toggleTagSelect}
              size="small"
              style="font-size: 12px"
            >
              {$t("base.markLabel")}
            </a-button>
          ) : null}
        </div>
        <div style="display: flex;width: 100%;margin: 10px 0 10px 20px;">
          {$t("party28")}：
          <partyTag
            v-model={props.formState.tags}
            isEdit={props.formState.isShowReviewBtnGroup}
            v-model:isShowTagSelect={isShowTagSelect.value}
            style="flex: 1"
          />
        </div>
        <s-design defineDrawer={defineDrawer} />
      </>
    );
  },
});
